<template>
  <!-- 登录容器 -->
  <div class="login-container">
    <!-- 登录区域 -->
    <div class="login-box">
      <!-- headprofile -->
      <div class="avatar-box">
        <img src="../../assets/img/cuteGirl.gif" alt="hei hei">
      </div>
      <!-- form -->
      <el-form :model="loginForm" :rules="rules" ref="loginForm" class="login-form">
        <el-form-item prop="username">
          <el-input name="username" placeholder="你是谁？" v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input name="password" :key="passwordType" :type="passwordType" v-model="loginForm.password" prefix-icon="el-icon-lock" suffix-icon="el-icon-view"></el-input>
          <span class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item>
          <el-popover
            placement="right"
            width="400"
            trigger="click">
            <h3>Hi，我们需要验证一下你是不是人类~</h3>
            <el-divider></el-divider>
            <SliceValidate :successFun="handleSuccessFun" :errorFun="handleErrorFun"></SliceValidate>
            <el-button slot="reference" :loading="loading" style="width: 100%;" type="primary">登录</el-button>
          </el-popover>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 48%;" @click="register()">注册</el-button>
          <el-button style="width: 48%;" @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- footer -->
    <div class="login-footer">
      <p align="center">designed by chengjiang@stu.cdu.edu | Copyright @ 2022</p>
    </div>
  </div>
</template>
<script>
import SliceValidate from "@/components/SliceValidate";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Login',
  components: {
    SliceValidate
  },
  data () {
    return {
      otherQuery: {},
      passwordType: 'password',
      loading: false,
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          { min: 6, max: 8, message: '长度在 6 到 8 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  methods: {
    register() {
      this.$router.push('/register')
    },
    showPwd () {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    submitForm() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          // this.$router.push('/main')
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || '/main', query: this.otherQuery })
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    },
    // submitForm (formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert('submit!')
    //       this.$router.push('/main')
    //     } else {
    //       console.log('error submit!!')
    //       return false
    //     }
    //   })
    // },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 滑块验证成功回调
    handleSuccessFun() {
      this.submitForm()
    },
    // 滑块验证失败回调
    handleErrorFun() {
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="less" scoped>
.login-container{
  height: 100%;
  //background-color: aquamarine;
  background-image:url('../../assets/img/login.gif');
  background-repeat:no-repeat;
  background-size:cover;

}
.login-box{
  width: 450px;
  height: 380px;
  background-color: white;
  opacity: 0.95;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* 头像 */
  .avatar-box{
    width: 130px;
    height: 130px;
    border: 1px solid #eeeeee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: -65px auto;
    background-color: #f0f9eb;
    /* photo */
    img{
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  /* pwd */
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: #889aa4;
    cursor: pointer;
    user-select: none;
  }

  .login-form{
    width: 80%;
    margin: 100px auto;
  }
}
.login-footer{
  position: absolute;
  width: 100%;
  bottom: 100px;
  p{
    margin: auto;
  }
}
</style>
